header{
    display: flex;
    height: 0.96rem;
    width: 7.5rem;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top:0;
    z-index: 2;
    background-color:#F7F5EF;;

}
header .middle{
    height: 0.58rem;
    width:5.47rem;
    background:rgba(255,255,255,1);
    border-radius:0.1rem;
    display: flex;
    align-items: center;
}

header .left{
    font-size: 0.30rem;
    margin-left: 0.12rem;
}
header .middle .text{
    font-size: 0.24rem;
    color:hsla(0, 0%, 60%, 1);
    margin-left: 0.30rem;
}


header .middle .search{
    background-image: url("../img/sousuo@2x.png");
    height: 0.27rem;
    width:0.27rem;
    background-size: cover;
    color: hsla(0, 0%, 60%, 1);
    margin-left: 0.17rem;
}
header .right{
    background-image: url("../img/xiaoxi@2x.png");
    height:0.35rem;
    width:0.35rem;
    background-size: cover;
    margin-right: 0.28rem;
}

nav{
    height:0.88rem;
    width: 7.49rem;
    background-color: #FFFFFF;
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-top: 0.9rem;
}

nav a{
    font-size: 0.32rem;
    margin-left: 0.32rem;
    color: hsla(0, 0%, 40%, 1);
}
nav .select{
    color: black;
}

.banner{
    height:2.69rem;
    width:7.5rem;
    background-image: url("../img/banner@2x.png");
    background-size: cover;
    position: relative;
}
.banner .banner-text{
    background-image: url("../img/bannerziti@2x.png");
    height:0.28rem;
    width:2.04rem;
    background-size: cover;
    position: absolute;
    right:0.26rem;
    top:1.07rem;
}

.sub-nav{
    height:2.59rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sub-nav .content{
    height:1.56rem;
    width:1rem;
}
.sub-nav .content .img{
    background-image: url("../img/u=194457569,2178415267&fm=26&gp=0@2x.png");
    height:1rem;
    width:1rem;
    background-size: cover;
    background-repeat: no-repeat;
}
.sub-nav .content .text{
    font-size: 0.25rem;
    margin-top: 0.32rem;
    text-align: center;

}
.sub-nav .margin-left{
    margin-left: 0.43rem;
}
.sub-nav .margin-right{
    margin-right: 0.44rem;
}

.shop{
    height:10.23rem;
    width:7.5rem;
    background-color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;

}
.shop .pet-banner{
    height: 0.3rem;
    width:7.5rem;
    display: flex;
    font-size: 0.28rem;
    margin-top: 0.34rem;
    margin-left: 0.27rem;


}
.shop .pet-content{
    height:3.75rem;
    width:3.15rem;
    margin-top: -1.3rem;
    margin-left: 0.30rem;
}

.shop .img-1{
    background-image: url("../img/pet-1.png");
    height:2.13rem;
    width:3.15rem;
    background-size:cover;

}
.shop .pet-content .text-1{
     font-size: 0.28rem;
     color: hsla(0, 0%, 20%, 1);
     margin-top: 0.32rem;
    font-weight:400;
}
.shop .pet-content .text-2{
    display: flex;
    justify-content: space-between;
    margin-top: 0.34rem;
    font-weight:400;
}
.shop .pet-content .text-2 .left{
    font-size:0.28rem;
    color:hsla(0, 0%, 20%, 1);
}

.shop .pet-content .text-2 .right{
    font-size: 0.24rem;
    color:hsla(0, 0%, 20%, 1);
}

.shop.margin-top{
    margin-top:0.32rem;
}


footer{
    height:0.98rem;
    width:7.5rem;
    background:rgba(255,255,255,1);
    box-shadow:0 -0.05rem 0.1rem 0 rgba(173,173,173,0.11);
    color:hsla(31, 89%, 22%, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
}
footer .text-3{
    font-size: 0.2rem;
    margin-top: 0.1rem;
}

footer .content-2{
    height: 0.70rem;
    width: 0.40rem;
    margin-left: 0.76rem;
}
footer .content-2.margin-right{
    margin-right: 0.79rem;
}
footer .img-2{
    background-image: url("../img/jingxuan(2)@2x.png");
    width:0.36rem;
    height:0.30rem;
    background-repeat: no-repeat;
    background-size: cover;
}